<template>
      <div>
            <div class="container">
                  <div class="results" v-if="sentimentData">
                        <p class="results-title">
                              共分析出{{ sentimentData.length }}条弹幕
                              <el-button size="mini" @click="show" type="success">查看分析</el-button>
                        </p>
                        <ul class="results-list">
                              <li v-for="item in sentimentData" :key="item.line" :class="{ positive: item.state === 1, negative: item.state === -1, neutral: item.state === 0 }" class="results-item">
                                    {{ item.line }}(
                                    <el-tag :type="item.state == 1 ? 'success' : item.state == -1 ? 'danger' : item.state == 2 ? 'warning' : 'info'">{{
                                          item.state == 1 ? "积极" : item.state == -1 ? "消极" : item.state == 2 ? "字数不足" : "中性"
                                    }}</el-tag>
                                    )
                              </li>
                        </ul>
                  </div>
            </div>
            <el-dialog title="分析" :visible.sync="formVisible" width="30%" :before-close="$utils.handleClose" :fullscreen="true">
                  <el-tabs v-model="activeName" :before-leave="switchTab">
                        <el-tab-pane label="饼图" name="Pie"></el-tab-pane>
                        <el-tab-pane label="柱状图" name="Bir"></el-tab-pane>
                        <el-tab-pane label="词云图" name="wordcloud"></el-tab-pane>
                  </el-tabs>
                  <el-col :span="24" id="main"></el-col>
            </el-dialog>
      </div>
</template>

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
      name: "",
      props: [],
      data() {
            return {
                  activeName: "Pie",
                  videoUrl: "",
                  sentimentData: [],
                  message: "",
                  chart: "",
                  series: [],
                  formVisible: false,
                  worddata: [],
                  wordcloud: "",
            };
      },
      methods: {
            switchTab(e) {
                  if (e == "Pie") {
                        this.initEcharts();
                  } else if (e == "Bir") {
                        this.initBir()
                  } else {
                        this.initWordcloud();
                  }
            },
            initPie() {
                  let series = [];
                  let success = {
                        name: "积极",
                        value: 0,
                  };
                  let danger = {
                        name: "消极",
                        value: 0,
                  };
                  let info = {
                        name: "中性",
                        value: 0,
                  };
                  let warning = {
                        name: "字数不足",
                        value: 0,
                  };
                  this.sentimentData.forEach((item) => {
                        if (item.state == 1) {
                              success.value++;
                        } else if (item.state == -1) {
                              danger.value++;
                        } else if (item.state == 2) {
                              warning.value++;
                        } else {
                              info.value++;
                        }
                  });
                  series.push(success);
                  series.push(danger);
                  series.push(warning);
                  series.push(info);

                  var option = {
                        tooltip: {
                              trigger: "item",
                        },
                        legend: {
                              orient: "vertical",
                              left: "left",
                        },
                        series: [
                              {
                                    name: "Access From",
                                    type: "pie",
                                    radius: "50%",
                                    data: series,
                                    emphasis: {
                                          itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: "rgba(0, 0, 0, 0.5)",
                                          },
                                    },
                              },
                        ],
                  };

                  option && this.echarts.setOption(option);
            },
            initBir() {
                  let series = [];
                  let success = {
                        name: "积极",
                        value: 0,
                  };
                  let danger = {
                        name: "消极",
                        value: 0,
                  };
                  let info = {
                        name: "中性",
                        value: 0,
                  };
                  let warning = {
                        name: "字数不足",
                        value: 0,
                  };
                  this.sentimentData.forEach((item) => {
                        if (item.state == 1) {
                              success.value++;
                        } else if (item.state == -1) {
                              danger.value++;
                        } else if (item.state == 2) {
                              warning.value++;
                        } else {
                              info.value++;
                        }
                  });
                  series.push(success.value);
                  series.push(danger.value);
                  series.push(info.value);
                  series.push(warning.value);

                  var option = {
                        xAxis: {
                        type: 'category',
                        data: ['积极', '消极', '中性', '字数不足']
                        },
                        yAxis: {
                        type: 'value'
                        },
                        series: [
                        {
                              name:'数量',
                              data: series,
                              type: 'bar',
                              showBackground: true,
                              backgroundStyle: {
                              color: 'rgba(180, 180, 180, 0.2)'
                              }
                        }
                        ]
                        };

                  option && this.echarts.setOption(option);
            },
            initWordcloud() {
                  for(let i=0;i<this.sentimentData.length && i<20;i++)
                  this.sentimentData.forEach((item) => {
                        this.worddata.push({
                              name:item.line,
                              value:i+1
                        })
                  });

                  const option = {
                        title: {
                              text: "弹幕词云",
                              x: "center",
                        },
                        backgroundColor: "#fff",
                        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            // //用来调整字的大小范围
 
            sizeRange: [14, 60],
            // //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            rotationRange: [-90, 90],
            // rotationRange: [ 0,90],
            // rotationRange: [0, 0],
            //随机生成字体颜色
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              // Color can be a callback function or a color string
              color: function () {
                // Random color
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              focus: "self",
 
              textStyle: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            //位置相关设置
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "200%",
            height: "200%",
            //数据
            data: this.worddata,
          },
        ],
                  };

                  option && this.echarts.setOption(option);
            },
            submitVideoUrl() {
                  this.videoUrl = window.sessionStorage.getItem("url");
                  this.$root.loading = true;
                  let formData = new FormData();
                  formData.append("url", this.videoUrl);
                  // 发送 POST 请求，将 inputText 提交给服务器
                  this.$axios({
                        url: this.$url + "/client/senta",
                        method: "POST",
                        data: formData,
                  }).then((res) => {
                        this.sentimentData = res.data.data.sentaList;
                  });
            },
            show() {
                  this.formVisible = true;

                  setTimeout(() => {
                        this.initEcharts();
                        // this.initWordCloudEcharts();
                  }, 1000);
            },
            initEcharts() {
                  var chartDom = document.getElementById("main");
                  this.echarts = this.$echarts.init(chartDom);
                  this.initPie();
            },
            initWordCloudEcharts() {
                  for (let i = 0; i < 10; i++) {
                        if (this.sentimentData[i]) {
                              let item = {
                                    name: this.sentimentData[i].line,
                                    value: i + 1,
                              };
                              this.worddata.push(item);
                        }
                  }

                  var chartDom = document.getElementById("wordcloud");
                  this.wordcloud = this.$echarts.init(chartDom);
                  
            },
      },
      mounted() {
            this.submitVideoUrl();
      },
};
</script>

<style scoped>
#main {
      margin: 0 auto;
      width: 100vw;
      height: 500px;
}
.container {
      max-width: 960px;
      margin: 0 auto;
      padding: 40px 20px;
}

.header {
      text-align: center;
}

.title {
      font-size: 36px;
      color: #0077ff;
      margin-bottom: 40px;
}

.form {
      display: flex;
      flex-direction: column;
      align-items: center;
}

.input-container {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
}

.input {
      padding: 16px;
      border-radius: 4px 0 0 4px;
      border: 1px solid #ccc;
      font-size: 16px;
      outline: none;
      width: 400px;
}

.button {
      padding: 16px;
      border-radius: 0 4px 4px 0;
      background-color: #0077ff;
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 16px;
}

.message {
      text-align: center;
      color: red;
      margin-bottom: 20px;
}

.results {
      margin-top: 40px;
}

.results-title {
      font-size: 24px;
      margin-bottom: 20px;
}

.results-list {
      list-style: none;
      margin: 0;
      padding: 0;
}

.results-item {
      margin-bottom: 16px;
      padding: 16px;
      border-radius: 4px;
      font-size: 18px;
      color: #444;
}

.positive {
      background-color: #a6e22e;
      color: #fff;
}

.negative {
      background-color: #ff3d3d;
      color: #fff;
}

.neutral {
      background-color: #ccc;
      color: #fff;
}
.el-tabs__nav {
      padding: 0 20px;
}
</style>
